{% extends '../_manage.html' %}

{% block title %} {{ _('All Users') }} {% endblock %}

{% block head %}
<script>

var page = parseInt('{{ page }}');
var q = '{{ q }}';
var g_currentTime = parseInt('{{ __timestamp__ }}');

$(function() {
	if (q) {
	    getJSON('/api/users', {
	        q: q
	    }, function (err, resp) {
	        if (err) {
	            return showError(err);
	        }
	        initVM({
	        	q: q,
	        	page: resp.page,
	        	users: resp.results
	        });
	    });
	} else {
	    getJSON('/api/users', {
	        page: page
	    }, function (err, resp) {
	        if (err) {
	            return showError(err);
	        }
	        initVM({
	        	q: '',
	        	page: resp.page,
	        	users: resp.results
	        });
	    });
	}
});

function initVM(data) {
	data.users.map(u => {
		u.lockAction = 0;
		u.unlockAction = 0;
	});
	window.vm = new Vue({
        el: '#vm',
        data: {
        	q: data.q,
            page: data.page,
            users: data.users,
            days: 1
        },
        methods: {
            isLocked: function (u) {
                return u.lockedUntil > g_currentTime;
            },
            getLockTime: function (u) {
                var t = u.lockedUntil - g_currentTime;
                if (t < 3600000) {
                    return 'Less in 1 hour';
                }
                if (t < 86400000) {
                    return 'in ' + parseInt(t / 3600000, 10) + ' hours';
                }
                if (t > 3000000000000) {
                    return 'forever';
                }
                if (t > 31536000000) {
                    var y = parseInt(t / 31536000000, 10);
                    var m = parseInt((t - 31536000000 * y) / 2592000000, 10);
                    var s = 'in ' + y + ' years';
                    if (m > 0) {
                        s = s + ' ' + m + ' months';
                    }
                    return s;
                }
                return 'in ' + parseInt(t / 86400000, 10) + ' days';
            },
            updateUserRole: function (u) {
                var that = this;
                UIkit.modal.confirm('The role of user \"' + u.name + '\" will be set to ' + $('option.x-role[value=' + u.role + ']').first().text() + '. Continue?', function() {
                    that.$resource('/api/users/' + u.id + '/role/' + u.role).save({}).then(function(resp) {
                        resp.json().then(function (result) {
                            refresh();
                        });
                    }, onJsonError);
                }, function () {
                    refresh();
                });
            },
            lockUser: function (u) {
                var that = this;
                var days = u.lockAction;
                var locked_until = days * 3600000 * 24 + g_currentTime;
                UIkit.modal.confirm('User \"' + u.name + '\" will be locked for ' + $('option.x-lock[value=' + days + ']').first().text() + '. Continue?', function() {
                    that.$resource('/api/users/' + u.id + '/lock/' + locked_until).save({}).then(function(resp) {
                        resp.json().then(function (result) {
                            refresh();
                        });
                    }, onJsonError);
                }, function () {
                    u.lockAction = 0;
                });
            },
            unlockUser: function (u) {
                var that = this;
                UIkit.modal.confirm('User \"' + u.name + '\" will be unlocked. Continue?', function() {
                    that.$resource('/api/users/' + u.id + '/lock/0').save({}).then(function (resp) {
                        resp.json().then(function (result) {
                            refresh();
                        });
                    }, onJsonError);
                }, function () {
                    u.unlockAction = 0;
                });
            }
        }
    });
    $('#loading').hide();
    $('#vm').show();
    g_vm = vm;
}
</script>
{% endblock %}

{% block main %}

    <div id="loading" class="uk-width-1-1">
        <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
    </div>

    <div id="vm" class="uk-width-1-1">
        <h3>{{ _('All Users') }}</h3>

        <div class="uk-margin uk-clearfix">
            
            <form class="uk-form">
                <button onclick="refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="q" value="{{ q }}" maxlength="100" placeholder="user id or name" class="uk-form-width-large">
                <button class="uk-button"><i class="uk-icon-search"></i> Search</button>
            </form>
        </div>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th width="8%">{{ _('Image') }}</th>
                    <th width="17%">{{ _('Name') }}</th>
                    <th width="40%">{{ _('Email') }}</th>
                    <th width="15%">{{ _('Created at') }}</th>
                    <th width="10%">{{ _('Status') }}</th>
                    <th width="10%">{{ _('Action') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="u in users">
                    <td>
                        <a v-bind:href="'/user/'+u.id" target="_blank"><img v-bind:src="u.imageUrl" class="uk-comment-avatar uk-border-circle x-avatar" style="width:50px;height:50px;"></a>
                    </td>
                    <td>
                        <a v-bind:href="'/user/'+u.id" target="_blank"><span v-text="u.name"></span></a>
                        <br>
                        <span v-if="u.role==='ADMIN'"><i class="uk-icon-key"></i> {{ _('Admin') }}</span>
                        <select v-if="u.role!=='ADMIN'" v-model="u.role" v-on:change="updateUserRole(u)">
                            <option value="EDITOR" class="x-role">{{ _('Editor') }}</option>
                            <option value="CONTRIBUTOR" class="x-role">{{ _('Contributor') }}</option>
                            <option value="SPONSOR" class="x-role">{{ _('Sponsor') }}</option>
                            <option value="SUBSCRIBER" class="x-role">{{ _('Subscriber') }}</option>
                        </select>
                    </td>
                    <td>
                    	<span v-text="u.email"></span>
                    	<br>
                    	<span v-text="u.id" class="uk-text-muted"></span>
                    </td>
                    <td><span v-text="u.createdAt.toDateTime()"></span></td>
                    <td>
                        <div v-if="! isLocked(u)">
                            <i class="uk-icon-check"></i>
                            Active
                        </div>
                        <div v-if="isLocked(u)" class="uk-text-danger">
                            <i class="uk-icon-ban"></i>
                            <span v-if="isLocked(u)" v-text="getLockTime(u)"></span>
                        </div>
                    </td>
                    <td>
                        <select v-if="isLocked(u)" v-model.number="u.unlockAction" v-on:change="unlockUser(u)">
                            <option value="0">-- Unlock --</option>
                            <option value="1">Unlock</option>
                        </select>
                        <select v-if="! isLocked(u)" v-model.number="u.lockAction" v-on:change="lockUser(u)">
                            <option value="0" class="x-lock">-- Lock --</option>
                            <option value="1" class="x-lock">1 day</option>
                            <option value="2" class="x-lock">2 days</option>
                            <option value="3" class="x-lock">3 days</option>
                            <option value="7" class="x-lock">1 week</option>
                            <option value="30" class="x-lock">1 month</option>
                            <option value="60" class="x-lock">2 months</option>
                            <option value="90" class="x-lock">3 months</option>
                            <option value="180" class="x-lock">6 months</option>
                            <option value="365" class="x-lock">1 year</option>
                            <option value="100000" class="x-lock">forever</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

        <div is="pagination" v-bind:page="page"></div>
    </div>

{% endblock%}
